<template>
    <div class="time">
        <i class="el-icon-timer" style="color: white;"></i>
        <div>{{ nowDate }}-{{ nowTime }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nowDate: null, //存放年月日
            nowTime: null, // 存放 时分秒
            timer: '', // 定时器
            currentTinme: new Date()  // 获取当前时间
        }
    },

    //实例创建前调用 
    created() {
        this.timer = setInterval(this.getCurrentTinme, 1000)
    },

    methods: {
        getCurrentTinme() {
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hour = date.getHours();
            const minute = date.getMinutes();
            const second = date.getSeconds();
            const str = ''
            if (this.hour > 12) {
                this.hour -= 12;
                this.str = 'PM'
            } else {
                this.str = '  AM'
            }
            this.month = check(month);
            this.day = check(day);
            this.month = check(month);
            this.hour = check(hour);
            this.minute = check(minute);
            this.second = check(second);
            function check(i) {
                const num = i < 10 ? '0' + i : i
                return num
            }
            this.nowDate = year + '/' + this.month + '/' + this.day
            this.nowTime = this.hour + ":" + this.minute + ':' + this.second




        }
    },

    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer)
        }
    }
}
</script>

<style lang="less" scoped>
.time {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #0936a8;

    i {
        font-size: 20px;
        color: #0936a8;
    }
}
</style>